<template>
  <div>
    <div class="rulerow">
      <div>回收指南</div>
      <div class="tex"></div>
      <el-button @click="openDetail1=true">详情</el-button>
      <el-button @click="handleForceLogout">设置</el-button>
    </div>
    <!-- 修改信息 -->
    <el-dialog title="评价回复" :visible.sync="openDetail" width="850px" append-to-body >
        <div class="synthesizebox">
            <el-form ref="form" :model="synthesform" label-width="0px">
              <el-form-item>
                <el-card style="height: 430px;">
                    <quill-editor v-model="synthesform.detail" ref="myQuillEditor" style="height: 300px;" :options="editorOption">
                    </quill-editor>
                </el-card>
              </el-form-item>
              <el-form-item>
                <el-button @click="openDetail=false">取消</el-button>
                <el-button type="primary" @click="onSubmit">保存</el-button>
              </el-form-item>
            </el-form>
        </div>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="openDetail1" width="850px" append-to-body >
        <div class="synthesizebox" v-if="list.length">
            <div v-html="list[0].detail"></div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listHandbook, getHandbook,updateHandbook,addHandbook} from "@/api/management/handbook";
  import { getToken } from '@/utils/auth'
  import {
      quillEditor,
      Quill
    } from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
    Quill.register('modules/ImageExtend', ImageExtend)
  export default {
    components: {
      quillEditor
    },
      data(){
        return{
          // 查询参数
          queryParams: {
            handbookType:"回收指南"
          },
          // 表格数据
          list: [],
          openDetail:false,
          synthesform:{},
          dialogVisible:false,
          dialogImageUrl:null,
          editorOption: {
            placeholder: "请输入",
            modules: {
              ImageExtend: {
                loading: true,
                name: "file",
                size: 0.02,
                action: "http://recycleplat.jiyar.net/recycle/ruoyi-recycle/universal/exportImport",
                response: res => {
                  return res.data;
                },
                headers: (xhr,formData) => {
                  xhr.setRequestHeader(
                   "Authorization",
                   'Bearer '+getToken()
                  );
                }, // 可选参数 设置请求头部
                sizeError: () => {
                  return this.$message.error("图片超过50kb");
                } // 图片超过大小的回调
              },
              toolbar: {
                container: [
                  ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
                  ["blockquote", "code-block"], //引用，代码块
                  [{ header: 1 }, { header: 2 }], // 几级标题
                  [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
                  [{ script: "sub" }, { script: "super" }], // 下角标，上角标
                  [{ indent: "-1" }, { indent: "+1" }], // 缩进
                  [{ direction: "rtl" }], // 文字输入方向
                  [{ size: ["small", false, "large", "huge"] }], // 字体大小
                  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                  [{ color: [] }, { background: [] }], // 颜色选择
                  [{ font: [] }], // 字体
                  [{ align: [] }], // 居中
                  ["link", "image"],
                  ["clean"]
                ],
                handlers: {
                  image: function() {
                    QuillWatch.emit(this.quill.id);
                  }
                }
              }
            }
          },
          openDetail1:false,
        }
      },
      created() {
        this.getList();
      },
      methods:{
        //提交修改
        onSubmit(){
          console.log(JSON.stringify(this.synthesform))
          console.log('---------------------------')
          console.log(this.synthesform)

          if(!this.synthesform.detail){
            this.$message({
              message: "请输入内容",
              type: 'error'
            })
            return
          }
          updateHandbook(JSON.stringify(this.synthesform)).then(res=>{
            this.$message({
              message: "设置成功",
              type: 'success'
            })
            this.openDetail=false
            setTimeout(()=>{
              this.getList()
            },1500)
          })
        },
        /** 查询列表 */
        getList() {
          this.loading = true;
          listHandbook(this.queryParams).then(response => {
            this.list = response.rows;
            this.loading = false;
          });
        },
        handleForceLogout(){
          this.synthesform=this.list[0]
          this.synthesform.handbookType="回收指南"
          this.openDetail=true
        }
      }
  }
</script>

<style lang="scss" scoped>
  .rulerow{
    display: flex;
    align-items: center;
    border: 1px solid #bebebe;
    padding: 20px;
    margin: 20px 30px 0;
    border-radius: 6px;
    .tex{
      flex: 1;
      margin: 0 200px;
      display: flex;
      justify-content: flex-end;
      color: #f00;
      span{
        color: #333;
      }
    }
  }
  .synthesizebox{
    margin: 0 50px;
    .setinput{
      display: flex;
      justify-content: center;
      margin-bottom: 50px;
      .el-input{
        width: 200px;
        margin: 0 10px;
      }
    }
  }
</style>
